<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的爱心</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    
    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');
        
        // 设置画布尺寸为窗口大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // 爱心参数
        let size = 50; // 初始大小
        let scale = 1; // 缩放比例
        let phase = 0; // 动画相位
        let centerX, centerY; // 中心点坐标
        
        // 计算爱心形状的函数
        function heartShape(t) {
            // 心形曲线参数方程
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
            return { x, y };
        }
        
        // 绘制爱心
        function drawHeart() {
            // 计算中心点
            centerX = canvas.width / 2;
            centerY = canvas.height / 2;
            
            // 计算当前缩放比例（跳动效果）
            scale = 1 + 0.1 * Math.sin(phase);
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 开始绘制爱心
            ctx.beginPath();
            
            // 创建爱心的渐变色
            const gradient = ctx.createRadialGradient(
                centerX, centerY - size * 0.3, size * 0.1,
                centerX, centerY, size * 1.5
            );
            gradient.addColorStop(0, '#ff7675'); // 亮色
            gradient.addColorStop(1, '#d63031'); // 暗色
            
            // 设置填充样式为渐变色
            ctx.fillStyle = gradient;
            
            // 绘制爱心形状
            const points = 100; // 点数
            for (let i = 0; i <= points; i++) {
                const t = (i / points) * Math.PI * 2;
                const { x, y } = heartShape(t);
                const drawX = centerX + x * size * scale;
                const drawY = centerY - y * size * scale; // 负号是为了让爱心正立
                
                if (i === 0) {
                    ctx.moveTo(drawX, drawY);
                } else {
                    ctx.lineTo(drawX, drawY);
                }
            }
            
            // 填充爱心
            ctx.fill();
            
            // 更新相位（控制跳动速度）
            phase += 0.1;
            
            // 继续下一帧动画
            requestAnimationFrame(drawHeart);
        }
        
        // 添加鼠标交互：鼠标移动时爱心会跟随
        canvas.addEventListener('mousemove', function(e) {
            // 让爱心位置略微跟随鼠标，但不完全跟随
            const targetX = e.clientX;
            const targetY = e.clientY;
            
            // 使用缓动效果让移动更平滑
            centerX += (targetX - centerX) * 0.01;
            centerY += (targetY - centerY) * 0.01;
        });
        
        // 开始动画
        drawHeart();
    </script>
</body>
</html>
